<script setup lang="ts">
import { useTagList } from "@fl/api/xf-api/comment-manage";
import { SubmitBtn } from '@fl/components';
import { cloneDeep } from "lodash-es";
import { PlusDialog } from 'plus-pro-components';
const emits = defineEmits(["update:show", "confirmTag"]);
const show = defineModel("show");
const { data, isLoading } = useTagList(show,{});
const records = ref();
defineExpose({close})
watchEffect(() => {
  if (data.value) {
    records.value = cloneDeep(data.value);
  }
});
function close() {
  show.value = false;
  checkedTags.value = []
  isIndeterminate.value = false
}
const checkAll = ref(false)
const isIndeterminate = ref(false)
const checkedTags = ref([])
const handleCheckAllChange = (val: boolean) => {
    checkedTags.value = val ? records.value : []
  isIndeterminate.value = false
}
const handleCheckedChange = (value: string[]) => {
  const checkedCount = value.length
  checkAll.value = checkedCount === records.value.length
  isIndeterminate.value = checkedCount > 0 && checkedCount < records.value.length
}

function confirm () {
  if(checkedTags.value.length === 0){
    ElMessage({
      message: '请选择标签',
      type: 'warning',
    })
    return
  }
    emits('confirmTag', checkedTags.value)
}
</script>

<template>

<PlusDialog
    v-model="show"
    title="选择标签"
    width="60%"
  >
  <el-checkbox
    v-model="checkAll"
    :indeterminate="isIndeterminate"
    @change="handleCheckAllChange"
  >
    全选
  </el-checkbox>
  <el-checkbox-group
    v-model="checkedTags"
    @change="handleCheckedChange"
  >
    <el-checkbox v-for="item in records" :key="item" :label="item" :value="item">
      {{ item.name }}
    </el-checkbox>
  </el-checkbox-group>
  
  <template #footer>
      <div class="mx-auto">
        <el-button @click="close"> 取消 </el-button>

        <SubmitBtn type="primary" @click="confirm"> 提交 </SubmitBtn>
      </div>
    </template>
  </PlusDialog>
</template>